<template>
  <div>
    <div class="allread" @click="allreadcc" v-if="read_type !== 2 && msglist != ''">
      <span class="allreaditem">
        一键已读
      </span>
    </div>
    <div class="tabtitle" v-if="msglist != ''">
      <div class="typeclass">
        类型
      </div>
      <div class="flex-10">
        内容
      </div>
      <div class="flex-2" style="text-align: center;">
        时间
      </div>
      <div class="" style="padding:0 10px">
        状态
      </div>
    </div>

    <div class="itemlist" v-for="i in msglist" :key="i.id">
      <div class="typeclass"
        :class="{ status1: i.status == 0, status2: i.status == 10, status3: i.status == 20, status4: i.status == 30 }">
        {{ i.type }}
      </div>
      <div class="flex-10 hidden-one ">
        {{ i.content }}
      </div>
      <div class="flex-2" style="text-align: center;">
        {{ i.create_time }}
      </div>
      <div :class="i.is_read ? 'read' : 'noread'">
        {{ i.read_status }}
      </div>
    </div>
    <template v-if="msglist != ''">
      <div class="pageclass1">
        <a-pagination v-model="current" @change="change" :total="total" show-less-items />
      </div>
    </template>
    <a-empty v-if="msglist == ''" />
  </div>
</template>

<script>
import * as Api from '@/api/order'

export default {
  data() {
    return {
      msglist: [],
      current: 1,
      read_type: 0,
      total: 0
    }
  },
  mounted() {
    this.getlist()
  },
  watch: {
    // 监听路由变化
    $route(newr, oldr) {
      // console.log(newr.fullPath.indexOf('wd'))
      if (newr.fullPath.indexOf('wd') > -1) {
        this.read_type = 1
        this.page = 1
      }
      if (newr.fullPath.indexOf('yd') > -1) {
        this.read_type = 2
        this.page = 1
      }

      if (newr.fullPath.indexOf('index') > -1) {
        this.read_type = 0
        this.page = 1
      }
      this.getlist()
    }

  },
  methods: {
    getlist() {
      Api.messagelist({ page: this.page, list_rows: 10, read_type: this.read_type }).then(res => {
        this.msglist = res.data.data
        this.total = res.data.total
      })
    },
    allreadcc() {
      Api.allread({}).then(res => {
        location.reload()
      })
    },
    change(e) {
      console.log(e)
      this.page = e
      this.getlist()
    }
  }
}
</script>

<style>
.tabtitle {
  background-color: #f5f5f5;
  padding: 20px 50px;
  border-radius: 5px;
  display: flex;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
}

.flex-1 {
  flex: 1;
  text-align: center;
}

.flex-2 {
  flex: 2;
}

.flex-10 {
  flex: 10;
}

.itemlist {
  padding: 20px 50px;
  display: flex;
  text-align: left;
  box-shadow: 4px 1px 12px -5px #000;
  align-items: center;
}

.hidden-one {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

}

.status1 {
  padding: 5px 10px;
  border: 1px solid rgb(113, 198, 226);
  border-radius: 5px;
  color: rgb(113, 198, 226);
}

.status2 {
  padding: 5px 10px;
  border: 1px solid rgb(207 207 13);
  border-radius: 5px;
  color: rgb(207 207 13);
}

.status3 {
  padding: 5px 10px;
  border: 1px solid salmon;
  border-radius: 5px;
  color: salmon;
}

.status4 {
  padding: 5px 10px;
  border: 1px solid limegreen;
  border-radius: 5px;
  color: limegreen;
}

.typeclass {
  width: 100px;
  margin-right: 30px;
  text-align: center;
}

.read {
  padding: 5px 10px;
  border: 1px solid limegreen;
  border-radius: 5px;
  color: limegreen;
}

.noread {
  padding: 5px 10px;
  border: 1px solid salmon;
  border-radius: 5px;
  color: salmon;

}

.pageclass1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 30px;
}

.allread {
  display: flex;
  justify-content: flex-end;

}

.allreaditem {
  padding: 10px 20px;
  background-color: lightskyblue;
  color: #fff;
  border-radius: 5px;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
}
</style>
